<template>
  <div class="box">
    <p-modal
      title="选择技能"
      :visible="skillVisible"
      :confirm-loading="skillConfirmLoading"
      :width = '1000'
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div class="top">
        <p-row>
          <p-col :span="6">
            <span>技能代码: </span>
            <p-input placeholder="请输入技能代码" style="width: 150px" v-model="queryParam.skillCode" />
          </p-col>
          <p-col :span="6">
            <span>技能名称: </span>
            <p-input placeholder="请输入技能名称" style="width: 150px" v-model="queryParam.skillName" />
          </p-col>
          <p-col :span="6">
            <p-button type="primary" @click="query(false)" style="margin-left: 10px">查询</p-button>
            <p-button type="primary" @click="query(true)" style="margin-left: 10px">重置</p-button>
          </p-col>
        </p-row>
      </div>

      <div class="bottom">
        <p-table
          :columns="columns"
          :data-source="data"
          :pagination="{total: pageTotal }"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, onSelect: onSelect, onSelectAll: onSelectAll }"
          @change="handleTableChange"
        >
          <a slot="action" slot-scope="text, record" @click="lookDetail(record)"> 查看详情 </a>
        </p-table>
      </div>
      <div class="select">
        <span class="select-first">已选择（1/1）：</span> 
        
          <span class="select-other" v-for="(item, index) in allSelectedRows" :key="index"> 
            {{ item.skillName }} <p-icon type="close" class="select-other-close" @click="delItem(item)" />
          </span>
      </div>
    </p-modal>

    <p-modal
      title="详情"
      :visible="skillDetailVisible"
      :confirm-loading="skillConfirmLoading"
      @ok="skillDetailVisible = false"
      @cancel="skillDetailVisible = false"
    >
      <p>
        <span>技能名称: </span>
        <span>{{this.skillDetailData.skillName}}</span>
      </p>
      <p>
        <span>技能代码: </span>
        <span>{{this.skillDetailData.skillCode}}</span>
      </p>
      <p>
        <span>技能属性: </span>
        <span>{{this.skillDetailData.skillProperty}}</span>
      </p>
      <p>
        <span>技能有效期（天）: </span>
        <span>{{this.skillDetailData.skillIndate}}</span>
      </p>
      <p>
        <span>复核合格分数: </span>
        <span>{{this.skillDetailData.reviewPassingScore}}</span>
      </p>
      <p>
        <span>线长确认合格分数（包含）: </span>
        <span>{{this.skillDetailData.lineleaderPassingScore}}</span>
      </p>
      <p>
        <span>见习合格分数（包含）: </span>
        <span>{{this.skillDetailData.traineePassingScore}}</span>
      </p>
      <p>
        <span>见习时长: </span>
        <span>{{this.skillDetailData.traineeTime}}</span>
      </p>
      <p>
        <span>线长确认: </span>
        <span>{{this.skillDetailData.lineleaderConfirm}}</span>
      </p>
      <p>
        <span>复核到期提前时间（天）: </span>
        <span>{{this.skillDetailData.beforeReviewTimes}}</span>
      </p>
    </p-modal>

  </div>
</template>

<script type="text/javascript">
import { postAction, getAction, deleteAction } from "@/api/manage";

const columns = [
  {
    title: "序号",
    dataIndex: "",
    key: "rowIndex",
    width: 60,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    },
  },
  {
    title: "技能编码",
    dataIndex: "skillCode",
    key: "skillCode",
  },
  {
    title: "技能名称",
    dataIndex: "skillName",
    key: "address 1",
    ellipsis: true,
  },
  {
    title: "技能描述",
    dataIndex: "remark",
    key: "remark",
    ellipsis: true,
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    scopedSlots: { customRender: "action" },
    ellipsis: true,
  },
];

export default {
  props: {
    mesPeProcessId: {
      type: String,
    },
    selectedProcessmcode: {
      type: String,
    },    
  },

  data() {
    return {
      skillDetailVisible: false,
      skillDetailData: {},
      skillVisible: false,
      skillConfirmLoading: false,
      data: [],
      columns,
      selectedRowKeys: [],
      allSelectedRowKeys: [],
      selectedRows: [],      
      allSelectedRows: [],      
      queryParam: {
        skillName: '',
        skillCode: '',
        pageNo: 1
      },
      pageTotal: 0,
      selectedSkills: [],
      url: {
        list: "/mes-manpower/mesHrSkillBank/craftList", // 查询技能列表
      },
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    // 查询
    async query(isReset = false){
      this.queryParam.defCode = this.selectedProcessmcode
      
      if(isReset) {
        this.queryParam = this.$options.data().queryParam
      }
      await getAction( this.url.list, this.queryParam).then(res => {
        if (res.success) {
          this.data = res.data.records
          this.pageTotal = res.data.total
        }
      } )
    },
    // 显示弹窗
    showModal(isClearData) {
      if (isClearData) {
        this.selectedRowKeys = []
        this.allSelectedRowKeys = []
        this.selectedRows = []
        this.allSelectedRows = []
      }
      this.skillVisible = true;
      this.query()
    },
    // 取消
    handleCancel() {
      this.skillVisible = false;
    },
    // 选中，  参数不同
    onSelect(record, selected, selectedRows, nativeEvent){

      if (selected) {
        this.allSelectedRows.push(record)
      }else {
        let delIndex;
        this.allSelectedRows.forEach( (ele, index) => {
          if( ele.id == record.id ){
            delIndex = index
          }
        } )
        this.allSelectedRows.splice( delIndex, 1 )
      }
    },

    // 选中, 参数不同
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      // console.log('selectedRows: ', selectedRows);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows
    },    
    // 全部选择
    onSelectAll(selected, selectedRows, changeRows){
      if (selected) {
        this.allSelectedRows.push(...changeRows)
      }else {
        const idArr = changeRows.map( ele => ele.id )
        this.allSelectedRows = this.allSelectedRows.filter(ele => !idArr.includes(ele.id)  )
      }
    },
    // 翻页
    pageChange(page, pageSize){
      this.queryParam.pageNo = page
      this.query()
    },

    async handleTableChange(pagination, filters, sorter) {
      this.queryParam.pageNo = pagination.current
      this.selectedRowKeys = []
      await this.query()
      
      let allSelectedIdArr = this.allSelectedRows.map( ele => ele.id )
      this.data.forEach( (ele, index) => {
        if ( allSelectedIdArr.includes(ele.id) ) {
          this.selectedRowKeys.push(index)
        }
      } )

    },

    // 删除选中的技能
    delItem(item){
      let delIndex;
      this.allSelectedRows.forEach( (ele, index) => {
        if( ele.id == item.id ){
          delIndex = index
        }
      } )
      this.allSelectedRows.splice( delIndex, 1 )

      let selectIndex;
      this.data.forEach( (ele, index) => {
        if( ele.id == item.id ){
          selectIndex = index
        }
      } )
      this.selectedRowKeys.splice( this.selectedRowKeys.indexOf(selectIndex), 1)
    },

    // 点击确定
    handleOk(){
      this.$emit('selectSkillOk', JSON.parse(JSON.stringify(this.allSelectedRows)))
      this.skillVisible = false;
    },

    // 查看详情
    lookDetail(record){
      this.skillDetailVisible = true
      this.skillDetailData = record
    }

  },
  components: {},
};
</script>

<style lang="less" scoped>
.top {
  padding-bottom: 20px;
}
.select {
  line-height: 24px;
  .select-first {

  }
  .select-other {
    border: 1px solid #ddd;
    margin-right: 10px;
    .select-other-close {
      cursor: pointer;
    }
  }
}
</style>
